<template>
  <div class="song-list-box">
    <!-- 头部导航标签 -->
    <div class="top">
      <!-- 下拉菜单 -->
      <div class="selector">
        <el-dropdown @command="handleClick">
          <el-button szie="mini">
            {{ currentTag }}<i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in hotTagsList"
              :key="index"
              :command="item.name"
              >{{ item.name }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 热门标签 -->
      <div class="hot-tabs">
        <span class="left">热门标签:</span>
        <span
          v-for="(item, index) in hotTagsList"
          :key="item.id"
          class="tags-item"
          :class="{ active: currentTag == item.name }"
          @click="handleClick(item.name)"
        >
          {{ item.name }}
          <span v-if="hotTagsList.length - 1 != index" style="color: black"
            >|</span
          >
        </span>
      </div>
    </div>
    <!-- 歌单列表 -->
    <div class="song-list flex">
      <div class="item" v-for="item in hotPlayList" :key="item.id">
        <div class="item-top">
          <!-- 累计播放 -->
          <div class="playcount">
            <i class="el-icon-headset"></i> {{ item.playCount | changToWan }}
          </div>
          <!-- 图片 -->
          <img :src="item.coverImgUrl" alt="" />
          <!-- 播放图标 -->
          <div class="play"><i class="el-icon-video-play"></i></div>
          <!-- 用户图标 -->
          <div class="user">
            <i class="el-icon-user"></i> {{ item.creator.nickname }}
          </div>
        </div>
        <div class="bottom">
          {{ item.name }}
        </div>
      </div>
    </div>
    <!-- 分页 -->
    <div class="fenye">
      <div class="block">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="offset"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { getHotClass, getHotPlayList } from "@/network/songlist";
import { changToWan } from "@/common/filter";
export default {
  name: "Songlist",
  data() {
    return {
      hotTagsList: [],
      currentTag: "音乐",
      hotPlayList: [],
      limit: 30,
      offset: 1,
      total: 0,
    };
  },
  created() {
    this.getHotTabs();
    this.getPlayList(this.limit, this.offset, "");
  },
  mounted() {
    var tag = sessionStorage.getItem("songListCurrentTag");
    this.currentTag = tag || "音乐";
    this.currentTag == "音乐"
      ? this.getPlayList(this.limit, this.offset, "")
      : this.getPlayList(this.limit, this.offset, this.currentTag);
  },
  methods: {
    handleClick(command) {
      // console.log(command)
      this.offset = 1;
      this.currentTag = command;
      this.getPlayList(this.limit, this.offset, this.currentTag);
      sessionStorage.setItem("songListCurrentTag", command);
      // sessionStorage.setItem('songListCurrentOffset')
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.hotPlayList = [];
      this.offset = val;
      var cat = this.currentTag == "音乐" ? "" : this.currentTag;
      this.getPlayList(this.limit, this.offset, cat);
    },
    getHotTabs() {
      getHotClass("/playlist/hot").then((res) => {
        // console.log(res.tags);
        this.hotTagsList = res.tags;
      });
    },
    getPlayList(limit, offset, cat) {
      getHotPlayList("/top/playlist", {
        limit: limit,
        offset: offset,
        cat: cat,
      }).then((res) => {
        console.log(res);
        this.total = res.total;
        this.hotPlayList = res.playlists;
      });
    },
  },
  filters: {
    changToWan,
  },
};
</script>

<style scoped lang="less">
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}

.song-list-box {
  .top {
    .selector {
      width: 80px;
    }
    .hot-tabs {
      margin-top: 20px;
      .left {
        margin-right: 20px;
      }
      .tags-item {
        margin-right: 20px;
        cursor: pointer;
      }
      .active {
        color: red;
      }
    }
  }
  .song-list {
    .item {
      margin-top: 20px;
      width: 200px;
      height: 260px;
      position: relative;
      overflow: hidden;
      padding: 0 10px;
      .item-top {
        img {
          width: 200px;
          height: 200px;
        }
        .playcount {
          position: absolute;
          top: 0;
          right: 10px;
          background-color: rgba(0, 0, 0, 0.5);
          color: #ffffff;
        }
        .play {
          position: absolute;
          right: 10px;
          bottom: 70px;
          transform: translateX(130%);
          transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
          .el-icon-video-play {
            width: 36px;
            height: 36px;
            font-size: 36px;
            color: red;
          }
        }
        .play:hover {
          cursor: pointer;
        }
        .user {
          position: absolute;
          bottom: 60px;
          left: 10px;
          color: #fff;
          font-size: 14px;
        }
      }
    }
    .item:hover .play {
      transform: translateX(-5%);
    }
  }
  // 分页
  .fenye {
    width: 300px;
    height: 30px;
    margin: 0 auto;
    margin-top: 20px;
  }
}
</style>